<template>
  <div class="vip-wrap">
    <div class="bg-wrap">
      <div class="top-user">
        <img :src="head" alt="">
        <div class="top-txt">
            <p class="name">{{userName.length>5?(userName.substr(0,5)+'...'):userName}}<span class="lv">VIP{{vip}}</span></p>
            <p class="day">已成为会员{{vipTime}}天</p>
        </div>        
      </div>
      <p class="tit">“ 送您1个Iyou会员名额 ”</p>
      <div class="btn" @click="goLogin">立即领取</div>
    </div>
    <p class="down" @click="btnAction">下载APP</p>
  </div>
</template>

<script>
  import {findBestIyouApk} from '@/request/api';
  export default {
    data() {
      return {
        userName: '',
        vip: '',
        vipTime: '',
        userid: '',
        head: '',
        downUrl:'',
      }
    },
    methods: {
      btnAction() {
        let ua = navigator.userAgent.toLowerCase();
        //ios终端
        let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //ios
          window.location = 'https://apps.apple.com/cn/app/iyou-%E9%AB%98%E5%88%86%E7%8E%A9%E5%AE%B6%E7%A4%BE%E4%BA%A4%E5%9C%88/id1506873053'
        } else {
          //android
          window.location = this.downUrl;
        }
      },
      goLogin() {
        this.$router.push({
          path: '/login',
        query: {
          userid:this.userid
        }})
      },
      getDownUrl(){
        findBestIyouApk().then(v=>{
          this.downUrl = v.data.data.downloadurl
        })
      },
      GetQueryString() { //获取指定name的url参数
        if ( window.location.href.indexOf('?')>0) {
          var query =window.location.href.split('?')[1];
          var vars = query.split("&");
          var addressParameter = {};
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            addressParameter[pair[0]] = decodeURIComponent(pair[1]);
          }
          return addressParameter
        }
      }
    },
    created() {
      let addressParameter = this.GetQueryString()
      this.userName = addressParameter['userName'];
      this.vip = addressParameter['vip'];
      this.vipTime = addressParameter['vipTime'];
      this.head = addressParameter['head'];
      this.userid = addressParameter['userid'];
      this.getDownUrl();
    }
  };

</script>

<style lang="scss" scoped>
  .vip-wrap {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.png') no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;

    .bg-wrap {
      width: 590px;
      height: 440px;
      background: url('../assets/images/vip.png') no-repeat;
      background-size: cover;
      margin: 140px auto 100px;
    }
    .top-user{
      padding:30px 60px 120px;
      display:flex;
      img{
        width:90px;
        height:90px;
        border-radius:50%;
        margin-right:15px;
      }
      .top-txt{
        padding-top:5px;
      }
      p.name{
        font-size:30px;
        color:#D8D8D8
      }
      .lv{
        height:28px;
        line-height:28px;
        display:inline-block;
        background:linear-gradient(138deg,rgba(202,158,155,1) 0%,rgba(255,228,229,1) 100%);
        border-radius:0px 15px 0px 15px;
        font-size:.24rem;
        margin-left:10px;
        padding:0 10px;
        color:#fff;
      }
      p.day{
        font-size:26px;
        color:#C78E6E;
      }
    }
    .tit{
      text-align:center;
      font-size:30px;
      color:#FF2B66;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:bold;
      line-height:42px;
    }
    .btn{
      display:block;
      width:434px;
      height:90px;
      line-height:90px;
      margin:45px auto 0;
      background:#111;
      border-radius:45px;
      text-align:center;
      color:#fff;
      font-size:32px;
    }
    .down{
      color:#fff;
      font-size:30px;
      line-height:48px;
      font-weight:600;
      text-align:center;
      border-bottom:4px #fff solid;
    }
  }

</style>
